<template>
	<div>
		<div class="app-container">
			<TopInfo />
			<Search :lookup="data.lookup" @investigate="inves" @changeSelect="changeSelect" />
			<div class="absolute">
				<el-button type="primary" size="small" @click="manager(1)">
					<template #default>
						<span class="text-sm">{{ $t('machine.custom.push') }}</span>
					</template>
				</el-button>
				<el-button type="primary" size="small" @click="manager(2)">
					<template #default>
						<span class="text-sm">{{ $t('machine.custom.batchDeliste') }}</span>
					</template>
				</el-button>	
			</div>
			<div class="w-full text-right">
				<el-button type="danger" size="small" @click="add">
					<template #default>
						<span class="text-sm">{{ $t('machine.custom.releasePlan') }}</span>
					</template>
				</el-button>
			</div>
		</div>

		<div class="app-container" v-loading="data.mtloading">
			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" :selectable="selectable" />

				<el-table-column prop="adv_title" :label="$t('machine.custom.pushTitle')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.adv_title || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="file_path" :label="$t('machine.custom.material')">
					<template #default="scope">
						<div @click="imgurl(scope.row.type, scope.row.file_path)">
							<el-image v-if="scope.row.type == 1" class="w-8" :src="scope.row.file_path" fit="fill" />
							<el-image v-else class="w-11" :src="bofang" fit="fill" />
						</div>
					</template>
				</el-table-column>

				<el-table-column prop="machine_id" :label="$t('machine.code')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.machine_id || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="start_date" :label="$t('date.releaseDate')" width="200">
					<template #default="scope">
						{{ getPlevel.gettime(scope.row.start_date, 1) }} ~ {{ getPlevel.gettime(scope.row.end_date, 1)
						}}
					</template>
				</el-table-column>

				<el-table-column prop="start_date" :label="$t('date.releaseTime')" width="200">
					<template #default="scope">
						{{ getPlevel.gettohms(scope.row.start_time) }} ~ {{ getPlevel.gettohms(scope.row.end_time) }}
					</template>
				</el-table-column>
				<el-table-column prop="position" :label="$t('machine.custom.placement')">
					<template #default="scope">
						{{ setPosition(scope.row) }}
					</template>
				</el-table-column>

				<el-table-column prop="status" :label="$t('machine.custom.status')" width="120">
					<template #default="scope">
						<el-tag :type="getstatus(scope.row.status, 1)">{{ getstatus(scope.row.status, 2) }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="download_progress" :label="$t('machine.custom.progress')" width="100">
					<template #default="scope">
						<el-progress :text-inside="true" :stroke-width="15" :percentage="scope.row.download_progress"
							status="exception" />
					</template>
				</el-table-column>
				<el-table-column :label="$t('public.operate')">
					<template #default="scope">
						<el-button type="warning" size="small" :disabled="scope.row.status <= 2 ? false : true"
							@click="Offshelf(scope.row.adv_id)">
							{{ $t('public.stop') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<PageNum :total="data.total" :page="data.pushadv" @exposeData="current" />
		</div>

		<el-dialog v-if="data.vodesing" v-model="data.vodesing" width="30%">
			<div v-if="data.objcet.type == 1" class="flex justify-center"><el-image class="max-w-60"
					:src="data.objcet.url" fit="fill" /></div>
			<Video v-else :url="data.objcet.url" :control="false" />
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import getPlevel from '@/utils/level';
import bofang from '@/assets/bofang.png';
import { getpushList, upDownpush, delpush, triggerUpdateAD } from '@/api/advment';
import { useRoute, useRouter } from "vue-router";
let setPosition = (row) => {
	let arr = getPlevel.positionList.filter(item => {
		if (item.push_type == row.push_type) {
			return item
		}
	})
	let list = []
	arr.forEach(item => {
		list = item.list
	})
	list.filter(item => {
		if (item.value == row.position) {
			row.position = $t(item.label)
		}
	})
	return row.position
}
const route = useRoute()
const router = useRouter();

let data = reactive({
	vodesing: false, // 素材大图预览
	mtloading: false, // 加载
	state: [{ label: $t('goods.corner.not'), value: 1 }, { label: $t('goods.corner.progress'), value: 2 }, { label: $t('goods.corner.Completed'), value: 3 }, { label: $t('marketing.guess.active'), value: 4 }, { label: $t('marketing.guess.delMaterial'), value: 5 }],
	lookup: [
		// 筛选栏
		{ title: $t('machine.custom.pushTitle'), type: 'input', value: '', key: 'adv_title' },
		{ title: $t('machine.custom.status'), type: 'define', select: [{ label: $t('goods.corner.not'), value: 1 }, { label: $t('goods.corner.progress'), value: 2 }, { label: $t('goods.corner.Completed'), value: 3 }, { label: $t('marketing.guess.active'), value: 4 }, { label: $t('marketing.guess.delMaterial'), value: 5 }], value: '', key: 'status' },
	],
	// 广告状态
	pushadv: {
		// 筛选数据
		adv_title: '',
		type: '',
		screen_full: '',
		status: '',
		m_id: '',
		create_time: '',
		pageNum: 15,
		page: 1
	},
	total: 0, // 总条数
	list: [],
	objcet: {}, // 素材预览
	advID: [] // 选中的广告
});
let changeSelect = (e) => {
	let arr = e.select.filter(item => {
		if (item.push_type == e.value) {
			return item
		}
	})
	let list = []
	arr.forEach(item => {
		list = item.list
	})

}
// 查询列表
let getpushadv = () => {
	let mid = JSON.parse(decodeURI(route.query.l)).info
	data.pushadv.m_id = mid
	data.mtloading = true;

	getpushList(data.pushadv).then(res => {
		data.mtloading = false;
		if (res.state == 200) {
			data.list = res.data.data;
			data.total = res.data.total;
		}
	});
};

// 选中广告
let handleSelectionChange = (e) => {
	data.advID = [];
	for (let item of e) {
		data.advID.push(item);
	}
};

// 是否允许被选中
let selectable = (e) => {
	let status = true
	if (e.status >= 3) {
		status = false
	}
	return status
}

// 页数回调
let current = (e) => {
	data.pushadv.page = e;
	getpushadv();
};

// 查询回调
let inves = (e) => {
	for (let key in e) {
		data.pushadv[key] = e[key];
	}

	if (typeof e.create_time == 'object') {
		data.pushadv.create_time = e.create_time[0] + '~' + e.create_time[1];
	}
	data.pushadv.page = 1;
	data.pushadv.pageNum = 15;
	getpushadv();
};

// 广告推送状态
let getstatus = (e, k) => {
	let color = ['info', 'info', '', 'success', 'warning', 'danger'];
	if (k == 1) {
		return color[e];
	}
	if (k == 2) {
		if (e == 0) {
			return $t('machine.custom.unknown');
		} else {
			return data.state[e - 1].label;
		}
	}
};

// 查看大图
let imgurl = (e, k) => {
	data.objcet = {
		type: e,
		url: k
	};
	data.vodesing = true;
};

// 广告推送
let add = () => {
	let query = {
		l: encodeURI(
			JSON.stringify({
				info: data.pushadv.m_id
			})
		)
	};
	router.push({ path: '/advment/info/add_info', query: query });
};
// 触发广告更新
let advPush = (e) => {
	let obj = {
		adv_id: e.join(',')
	};
	ElMessage({
		message: $t('message.pushing') + '...',
		type: 'success'
	});
	triggerUpdateAD(obj).then(res => {
		if (res.state == 200) {
			ElMessage({
				message: $t('message.pushSuccess'),
				type: 'success'
			});
			getpushadv();
			return;
		}
		ElMessage({
			message: $t('message.networkFailed'),
			type: 'error'
		});
	});
};

// 下架广告
let Offshelf = (e) => {
	ElMessageBox.confirm($t('message.removeAdv'))
		.then(res => {
			upDownpush({ adv_id: e, status: 4 }).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.downSuccess'),
						type: 'success'
					});
					getpushadv();
					return;
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				});
			});
		})
		.catch(err => {
			console.log('取消');
		});
};

// 删除广告
let dele = (e) => {
	ElMessageBox.confirm($t('message.delData'))
		.then(res => {
			delpush({ adv_id: e }).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.delSuccess'),
						type: 'success'
					});
					getpushadv();
					return;
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				});
			});
		})
		.catch(err => {
			console.log('取消');
		});
};

// 按钮管理
let manager = (e) => {
	if (data.advID.length == 0) {
		ElMessage({
			message: $t('message.pleaseSelecAdv'),
			type: 'error'
		});
		return;
	}

	let arr = [];
	switch (e) {
		case 1: // 批量推送
			for (let item of data.advID) {
				if (item.status == 2) {
					arr.push(item.adv_id);
				}
			}
			if (arr.length == 0) {
				ElMessage({
					message: $t('message.noPushAdv'),
					type: 'error'
				});
				return;
			}
			advPush(arr);
			break;
		case 2: // 批量下架
			for (let item of data.advID) {
				if (item.status <= 2) {
					arr.push(item.adv_id);
				}
			}
			if (arr.length == 0) {
				ElMessage({
					message: $t('message.noDownAdv'),
					type: 'error'
				});
				return;
			}
			Offshelf(arr.join(','));
			break;
		case 3: // 批量删除
			for (let item of data.advID) {
				if (item.status >= 3) {
					arr.push(item.adv_id);
				}
			}
			if (arr.length == 0) {
				ElMessage({
					message: $t('message.noDelAdv'),
					type: 'error'
				});
				return;
			}

			dele(arr.join(','));
			break;
	}
}
getpushadv();

</script>
